<!--
 * @Author:shuaishuai
-->
<template>
  <div class="center-content-box">
    <!-- 上 -->
    <div class="topBox">
      <div class="topCon flex-x-c">
        <div class="itemBox">
          <p class="num">
            6.53
            <span>亿吨</span>
          </p>
          <img src="../ImgFile/centerIcon01.png" alt="" width="110px" height="110px" />
          <p class="name">火力发电量</p>
        </div>
        <div class="itemBox">
          <p class="num">
            6.53
            <span>亿吨</span>
          </p>
          <img src="../ImgFile/centerIcon02.png" alt="" width="110px" height="110px" />
          <p class="name">煤电发电量</p>
        </div>
        <div class="itemBox">
          <p class="num">
            27.24
            <span>亿吨</span>
          </p>
          <img src="../ImgFile/centerIcon03.png" alt="" width="110px" height="110px" />
          <p class="name">煤电发电量</p>
        </div>
        <div class="itemBox">
          <p class="num">
            27.24
            <span>亿吨</span>
          </p>
          <img src="../ImgFile/centerIcon04.png" alt="" width="110px" height="110px" />
          <p class="name">煤电发电量</p>
        </div>
        <div class="itemBox">
          <p class="num">
            27.24
            <span>亿吨</span>
          </p>
          <img src="../ImgFile/centerIcon05.png" alt="" width="110px" height="110px" />
          <p class="name">煤电发电量</p>
        </div>
        <div class="itemBox">
          <p class="num">
            27.24
            <span>亿吨</span>
          </p>
          <img src="../ImgFile/centerIcon06.png" alt="" width="110px" height="110px" />
          <p class="name">煤电发电量</p>
        </div>
      </div>
      <p class="feihang">
        非电行业煤炭消费总量
        <span>21.67</span>
        亿吨
      </p>
    </div>
    <!-- 下 -->
    <div class="bottomBox">
      <p class="title">非发电行业煤炭消费监测</p>
      <div ref="barChart02" style="width: 100%; height: 86%"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { defineComponent } from 'vue'
export default defineComponent({
  data() {
    return {}
  },
  created() {},
  mounted() {
    this.getChartTwo()
  },
  methods: {
    getChartTwo() {
      let chart = echarts.init(this.$refs.barChart02)
      let lineData = [66, 43, 5, 44, 53, 24, 54, 44, 33, 22]
      let option = {
        tooltip: {
          top: '10%',
          trigger: 'axis',
          backgroundColor: 'rgba(8,45,74,0.85)',
          borderColor: 'rgb(140,255,74)', //设置边框颜色
          padding: 12,
          axisPointer: {
            type: 'shadow'
          },
          textStyle: {
            fontSize: 40,
            color: '#fff'
          },
          formatter: (params) => {
            let arr = [...params]
            let str = ''
            arr.forEach((item, index) => {
              if (item.componentSubType == 'line') {
                str +=
                  '<span style="margin-right:10px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                  item.color +
                  ';"></span>' +
                  item.seriesName +
                  '  ' +
                  item.data +
                  '%' +
                  '<br />'
              } else {
                str +=
                  '<span style="margin-right:10px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                  item.borderColor +
                  ';"></span>' +
                  item.seriesName +
                  '  ' +
                  item.data +
                  '<br />'
              }
            })
            str = arr[0].name + '<br />' + str
            return str
          }
        },
        grid: {
          top: 200,
          left: '2%',
          right: '2%',
          bottom: '8%',
          containLabel: true
        },
        legend: {
          top: '10%',
          itemWidth: 20,
          itemHeight: 20,
          // selectedMode: false, //不允许点击图例
          itemGap: 50,
          textStyle: {
            fontSize: 28,
            color: '#fff'
            // padding: [0, 8],
          }
          // data: ["冶金", "建材", "煤化工", "炼焦", "供热", "其他", '增速'],
        },
        xAxis: [
          {
            type: 'category',
            data: ['2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024'],
            splitLine: {
              show: true,
              // interval: information.area.length,
              lineStyle: {
                color: 'rgba(180, 228, 255, 0.1)',
                width: 2
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#666'
              }
            },
            axisLabel: {
              interval: 0,
              align: 'center',
              margin: 10,
              color: '#fff',
              rotate: 0,
              textStyle: {
                fontSize: 40
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '万吨',
            nameTextStyle: {
              color: '#fff',
              fontSize: 40,
              padding: [0, 0, 10, -20]
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: true
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 40
              }
            }
          },
          {
            type: 'value',
            name: '%',
            nameTextStyle: {
              color: '#fff',
              fontSize: 40,
              padding: [0, 0, 10, -20]
            },
            position: 'right',
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 40
              }
            }
          }
        ],
        series: [
          {
            name: '冶金',
            stack: '渠道1',
            type: 'bar',
            barWidth: 233,
            color: function (params) {
              return params.name == '2024' ? 'transparent' : '#44C5CF' // 如果是最后一个柱子则设置为透明，否则设置为默认颜色
            },
            itemStyle: {
              //图形样式
              // normal: {
              borderWidth: 3,
              borderColor: '#44C5CF',
              // color: "#44C5CF",
              color: function (params) {
                return params.name == '2024' ? 'transparent' : '#44C5CF' // 如果是最后一个柱子则设置为透明，否则设置为默认颜色
              }

              // }
            },
            data: [310, 20, 50, 106, 169, 160, 157, 220, 232, 201]
          },
          {
            name: '建材',
            stack: '渠道1',
            type: 'bar',
            barWidth: 233,
            color: function (params) {
              return params.name == '2024' ? 'transparent' : '#7F5ECC' // 如果是最后一个柱子则设置为透明，否则设置为默认颜色
            },
            itemStyle: {
              //图形样式
              // normal: {
              borderWidth: 3,
              borderColor: '#7F5ECC',
              // color: "rgba(127, 94, 204, 1)"
              color: function (params) {
                return params.name == '2024' ? 'transparent' : '#7F5ECC' // 如果是最后一个柱子则设置为透明，否则设置为默认颜色
              }
              // }
            },
            data: [310, 20, 50, 106, 169, 160, 157, 220, 232, 201]
          },
          {
            name: '煤化工',
            stack: '渠道1',
            type: 'bar',
            barWidth: 233,
            color: function (params) {
              return params.name == '2024' ? 'transparent' : '#D9BB5B' // 如果是最后一个柱子则设置为透明，否则设置为默认颜色
            },
            itemStyle: {
              //图形样式
              // normal: {
              borderWidth: 3,
              borderColor: '#D9BB5B',
              // color: "rgba(217, 187, 91, 1)"
              color: function (params) {
                return params.name == '2024' ? 'transparent' : '#D9BB5B' // 如果是最后一个柱子则设置为透明，否则设置为默认颜色
              }
              // }
            },
            data: [310, 20, 50, 106, 169, 160, 157, 220, 232, 201, 154]
          },
          {
            name: '炼焦',
            stack: '渠道1',
            type: 'bar',
            barWidth: 233,
            color: function (params) {
              return params.name == '2024' ? 'transparent' : '#59ABD9' // 如果是最后一个柱子则设置为透明，否则设置为默认颜色
            },
            itemStyle: {
              //图形样式
              // normal: {
              borderWidth: 3,
              borderColor: '#59ABD9',
              // color: "#59ABD9",
              color: function (params) {
                return params.name == '2024' ? 'transparent' : '#59ABD9' // 如果是最后一个柱子则设置为透明，否则设置为默认颜色
              }
              // }
            },
            data: [320, 332, 301, 334, 390, 330, 320, 120, 232, 201]
          },
          {
            name: '供热',
            stack: '渠道1',
            type: 'bar',
            barWidth: 233,
            color: function (params) {
              return params.name == '2024' ? 'transparent' : '#C4551A' // 如果是最后一个柱子则设置为透明，否则设置为默认颜色
            },
            itemStyle: {
              //图形样式
              // normal: {
              borderWidth: 3,
              borderColor: '#C4551A',
              // color: "#C4551A",
              color: function (params) {
                return params.name == '2024' ? 'transparent' : '#C4551A' // 如果是最后一个柱子则设置为透明，否则设置为默认颜色
              }
              // }
            },
            data: [320, 332, 301, 334, 390, 330, 320, 120, 232, 201]
          },
          {
            name: '其他',
            stack: '渠道1',
            type: 'bar',
            barWidth: 233,
            color: function (params) {
              return params.name == '2024' ? 'transparent' : '#4FAB61' // 如果是最后一个柱子则设置为透明，否则设置为默认颜色
            },
            itemStyle: {
              //图形样式
              // normal: {
              borderWidth: 3,
              borderColor: '#4FAB61',
              // color: "#4FAB61",
              color: function (params) {
                return params.name == '2024' ? 'transparent' : '#4FAB61' // 如果是最后一个柱子则设置为透明，否则设置为默认颜色
              }
              // }
            },
            data: [320, 332, 301, 334, 390, 330, 320, 120, 232, 201]
          },

          {
            z: 9,
            yAxisIndex: 1,
            name: '增速',
            type: 'line',
            // symbolSize: [10, 10],
            color: 'rgba(255, 195, 0, 1)',
            lineStyle: {
              color: 'rgba(255, 195, 0, 1)',
              width: 5
            },
            data: lineData
          }
        ]
      }
      chart.setOption(option, true)
      // 监听图例的点击事件
      // chart.on('legendselectchanged', function (event) {
      //     var selected = event.selected;
      //     var series = option.series;
      //     var increments = [];

      //     // var total = 0;
      //     // 遍历所有系列，计算选中数据的总和
      //     series.forEach(function (item) {
      //         // debugger
      //         if (selected[item.name] && item.name != '增速') {
      //             // item.data.forEach(function (value) {
      //             //     total += value;
      //             // });
      //             increments = [];
      //             for (var i = 1; i < item.data.length; i++) {
      //                 var increment = (item.data[i] - item.data[i - 1]) / item.data[i] * 100;
      //                 increments.push(increment.toFixed(2) + '%'); // 保留两位小数
      //             }

      //             console.log(increments)
      //         }
      //     });
      //     lineData = increments

      // })
      // chart.setOption(option, true);
    }
  }
})
</script>

<style lang="scss" scoped>
.center-content-box {
  width: 5850px;
  height: 1830px;

  .flex-x-c {
    display: flex;
    justify-content: center;
  }

  .topBox {
    height: 50%;

    .topCon {
      width: 4820px;
      margin-left: 658px;
      height: 640px;

      .itemBox:first-child {
        margin-left: 0 !important;
      }

      .itemBox {
        text-align: center;
        width: 458px;
        margin-left: 440px;

        img {
          margin-top: -20px;
        }

        .num {
          font-size: 100px;
          color: rgba(255, 195, 0, 1);
          line-height: 150px;
          margin-top: 100px;

          span {
            font-size: 40px;
            margin-left: 10px;
          }
        }

        .name {
          font-size: 60px;
          color: #fff;
          margin-top: 130px;
        }
      }
    }

    .barChart {
      .title {
        color: rgba(92, 255, 239, 1);
        font-size: 45px;
        text-align: center;
        margin-top: 80px;
      }

      width: 991px;
      height: 609px;
      margin: 135px 90px 0 80px;
    }

    .electricitybox {
      width: 700px;
      height: 860px;
      margin-left: 530px;
      text-align: center;
    }

    .feihang {
      font-size: 60px;
      text-align: center;
      color: #fff;
      line-height: 135px;
      margin-left: -160px;

      span {
        margin-left: 20px;
        color: rgba(255, 195, 0, 1);
      }
    }
  }

  .bottomBox {
    width: 100%;
    height: 50%;

    .title {
      text-align: center;
      color: #fff;
      font-size: 60px;
      line-height: 50px;
    }
  }
}
</style>
